<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 500px;
            border-collapse: collapse;
            text-align: center;
        }
        th,td{
            border: 1px solid #ccc;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/template.js"></script>
    <!--  定义模板 -->
    <script type="text/html" id="user">
        <table>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
            {{ each data as user index }}
            <tr>
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>
                    {{ if user.age>=60 }}
                        老年
                    {{ else if user.age>=40 }}
                        中年
                    {{ else if user.age>=18 }}
                        青年
                    {{ else }}
                        童年
                    {{ /if }}
                </td>
                <td>{{user.birthday}}</td>
            </tr>
            {{ /each }}
        </table>
    </script>
    <script>
        $(function () {
            $('#loadUser').click(function(){
                $.ajax({
                    url:'findAllUsers',
                    dataType:'json',
                    success:function(res){
                        // var table = $('<table>')
                        // var tr = $('<tr><th>序号</th><th>姓名</th><th>年龄</th><th>出生日期</th></tr>')
                        // table.append(tr)
                        //
                        // for(var user of res.data){
                        //     tr = $('<tr>')
                        //             .append($('<td>').text(user.id))
                        //             .append($('<td>').text(user.name))
                        //             .append($('<td>').text(user.age))
                        //             .append($('<td>').text(user.birthday))
                        //     table.append(tr)
                        // }
                        // $('#content').append(table)

                        // 渲染模板
                        var html = template('user',res)
                        $('#content').html(html)
                    }
                })
            })
        })

    </script>
</head>
<body>
    <button id="loadUser">获取用户信息</button>
    <hr>

    <div id="content">

    </div>
</body>
</html>